<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <title>LRC</title>
    <script src="./jquery.min.js"></script>
    <style>
        div {
            width: 340px;
            height: 500px;
            margin: 0 auto;
            overflow: hidden;
        }

        ul {
            transition-duration: 600ms;
        }

        ul,
        li {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        li.on {
            color: red;
        }

        p {
            overflow: hidden;
            text-overflow: ellipsis;
            height: 16px;
            line-height: 16px;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            display: -webkit-box;
            text-align: center;
            margin-top: 0;
            margin-bottom: 16px;
        }

        audio {
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div>
        <ul id="lrclist" style="transform: translateY(250px);">
            <!-- 保证歌词在正中间 -->

        </ul>
    </div>
    <audio id="audio"
        src="http://m10.music.126.net/20190328172525/4f9c8a587140c792656036c6adb7da83/ymusic/0fd6/4f65/43ed/a8772889f38dfcb91c04da915b301617.mp3"
        controls="controls" autoplay="true"></audio>

    <script>

        var lrcJSON1 = {
            "[00:16.810]": "誰にも言えない孤独を抱えたまま1人で泣いてた",
            "[00:28.040]": "誰にも上手に笑えない僕ら 2人出会って笑った",
            "[00:39.710]": "",
            "[00:40.410]": "真夜中過ぎに 想像の奥に",
            "[00:46.150]": "どうしようもない気持ちをただ押しやって",
            "[00:50.780]": "",
            "[00:51.480]": "サヨナラ 僕らはきっと生まれ変われるから",
            "[00:57.030]": "悲しみに手を振るんでしょう",
            "[01:01.190]": "そしていつか 空っぽのままの心に灯りをともすように",
            "[01:08.630]": "とぎれとぎれの 言葉を探して繋ぎ止めた",
            "[01:14.390]": "それでもたった二人の世界は続いて行くんだ",
            "[01:20.190]": "空に祈るように どうか永遠に",
            "[01:29.380]": "",
            "[01:43.670]": "白・黒・壱・零 僕らは選ぶ事を迫られてばかり",
            "[01:54.940]": "そうして残った大事な物を壊れるほど抱きしめていた",
            "[02:06.670]": "",
            "[02:07.670]": "明け方過ぎの光の先に",
            "[02:13.530]": "ほんの少しだけ未来が見えた気がして",
            "[02:18.110]": "",
            "[02:18.810]": "バカげた夢だってきっと願い続けるから",
            "[02:24.330]": "奇跡に近づくんでしょう",
            "[02:28.590]": "それは君の弱さの隣に見つけた強さの欠片だって",
            "[02:36.160]": "とぎれとぎれの 言葉を探して繋ぎ止めた",
            "[02:41.700]": "瞼の奥に滲んだ世界を守ってゆくんだ",
            "[02:47.470]": "空に祈るように 君と誓う明日",
            "[02:58.720]": "",
            "[03:08.900]": "不自由な思いが重なり合ったら",
            "[03:14.390]": "そうさ誰より自由になれた",
            "[03:20.390]": "足りないものを埋め合うように",
            "[03:25.700]": "疑いもせず 支えあいながら",
            "[03:31.610]": "",
            "[03:34.060]": "サヨナラ 僕らはきっと生まれ変われるから",
            "[03:39.490]": "悲しみに手を振るんでしょう",
            "[03:44.450]": "そしていつか 空っぽのままの心に灯りをともすように",
            "[03:51.620]": "とぎれとぎれの 言葉を探して繋ぎ止めた",
            "[03:57.190]": "それでもたった二人の世界は続いて行くんだ",
            "[04:03.000]": "空に祈るように どうか永遠に…"
        };
        fetch("http://106.12.79.128:3001/lyric?id=33894312")
            .then(res => res.json())
            .then(res => res.lrc.lyric)
            .then(lrc => {
                var lrcJSON = lrc.split("\n");
                console.log(lrcJSON)
                var lrcTime = [];//歌词对应的时间数组
                var ul = $("#lrclist")[0];//获取ul
                var i = 0;
                // [00:16.860]一双迷人的眼睛
                // {
                //     [00:16.860]:一双迷人的眼睛
                // }


                let newlrcJSON = lrcJSON.map(item => {
                    if (item == "") {//网易音乐歌词里面避免出现空字符串匹配Null的情况
                        return
                    }
                    let reg = /^\[.+\]/;//正则表达式 用于匹配[00.00.00]这种时间戳
                    let key = reg.exec(item)[0]//获取匹配的项
                    console.log(key)
                    let Lrc = {
                        //es6动态计算属性名
                        [key]: item.replace(reg, ""),//{[00.00.00]:'难以忘记初次见面...'这样式的}
                    }

                    lrcTime[i++] = parseFloat(key.substr(1, 3)) * 60 + parseFloat(key.substring(4, 10))
                    ul.innerHTML += "<li><p>" + Lrc[key] + "</p></li>"
                })
                console.log(lrcTime)

                var $li = $("#lrclist>li");//获取所有li
                var currentLine = 0;//当前播放到哪一句了
                var currentTime;//当前播放的时间
                var audio = document.getElementById("audio");
                var ppxx;//保存ul的translateY值

                audio.ontimeupdate = function () {//audio时间改变事件
                    currentTime = audio.currentTime; //获取到当前播放的第几秒
                    console.log(currentTime)
                    for (j = currentLine; j < lrcTime.length; j++) { //j=1
                        if (currentTime < lrcTime[j + 1] && currentTime > lrcTime[j]) {
                            currentLine = j;
                            ppxx = 250 - (currentLine * 32);
                            ul.style.transform = "translateY(" + ppxx + "px)";
                            $li.get(currentLine - 1).className = "";
                            console.log("on" + currentLine);
                            $li.get(currentLine).className = "on";
                            break;
                        }
                    }
                };
                audio.onseeked = function () {//audio进度更改后事件
                    currentTime = audio.currentTime;
                    console.log("  off" + currentLine);
                    $li.get(currentLine).className = "";
                    for (k = 0, len = lrcTime.length; k < len; k++) {
                        if (currentTime < lrcTime[k + 1] && currentTime < lrcTime[k]) {
                            currentLine = k;
                            ppxx = 250 - (currentLine * 32);
                            ul.style.transform = "translateY(" + ppxx + "px)";
                            break;
                        }
                    }
                };
            })
    </script>
</body>

</html>